// 文档加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 获取 DOM 元素
  const minutesDisplayElement = document.getElementById('minutes');
  const secondsDisplayElement = document.getElementById('seconds');
  const startButton = document.getElementById('start-btn');
  const pauseButton = document.getElementById('pause-btn');
  const resetButton = document.getElementById('reset-btn');
  const modeButtons = document.querySelectorAll('.mode-btn');
  const taskInputField = document.getElementById('task-input');
  const addTaskButton = document.getElementById('add-task-btn');
  const taskListElement = document.getElementById('task-list');
  const pendingTaskCountElement = document.getElementById('pending-count');
  const alarmSoundElement = document.getElementById('alarm-sound');
  const customMinutesInputField = document.getElementById('custom-minutes');
  const setCustomTimeButton = document.getElementById('set-custom-time');

  // 计时器变量
  let pomodoroTimer;
  // 番茄钟总秒数，默认 25 分钟工作时间
  let totalPomodoroSeconds = 25 * 60; 
  // 剩余番茄钟秒数
  let remainingPomodoroSeconds = totalPomodoroSeconds;
  // 番茄钟是否正在运行
  let isPomodoroRunning = false;
  // 当前番茄钟模式
  let currentPomodoroMode = 'work';
  // 自定义番茄钟分钟数，默认 25 分钟
  let customPomodoroMinutes = 25; 

  // 任务变量
  // 从本地存储中获取任务列表，如果没有则初始化为空数组
  let pomodoroTasks = JSON.parse(localStorage.getItem('pomodoroTasks')) || [];

  // 任务统计图表
  let taskStatsChart = null;

  // 初始化函数
  // 更新计时器显示
  updateTimerDisplay();
  // 渲染任务列表
  renderTaskList();
  // 更新任务统计信息
  updateTaskStats();

  // 事件监听
  // 开始按钮点击事件
  startButton.addEventListener('click', startPomodoroTimer);
  // 暂停按钮点击事件
  pauseButton.addEventListener('click', pausePomodoroTimer);
  // 重置按钮点击事件
  resetButton.addEventListener('click', resetPomodoroTimer);
  
  // 模式按钮点击事件
  modeButtons.forEach(btn => {
    btn.addEventListener('click', () => switchPomodoroMode(btn.dataset.mode));
  });

  // 添加任务按钮点击事件
  addTaskButton.addEventListener('click', addNewTask);
  // 任务输入框按键事件
  taskInputField.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') addNewTask();
  });

  // 设置自定义时间按钮点击事件
  setCustomTimeButton.addEventListener('click', setCustomPomodoroTime);

  /**
   * 启动番茄钟计时器
   * 当计时器未运行时，启动计时器，更新按钮状态，并每秒更新剩余时间和进度环
   * 当剩余时间为 0 时，停止计时器，播放闹钟声音，并启用开始按钮
   */
  function startPomodoroTimer() {
    if (isPomodoroRunning) return;
    
    isPomodoroRunning = true;
    startButton.disabled = true;
    pauseButton.disabled = false;
    
    pomodoroTimer = setInterval(() => {
      remainingPomodoroSeconds--;
      updateTimerDisplay();
      updateProgressRing();
      
      if (remainingPomodoroSeconds <= 0) {
        clearInterval(pomodoroTimer);
        alarmSoundElement.play();
        isPomodoroRunning = false;
        startButton.disabled = false; // 启用开始按钮
      }
    }, 1000);
  }

  /**
   * 暂停番茄钟计时器
   * 清除计时器，更新运行状态和按钮状态
   */
  function pausePomodoroTimer() {
    clearInterval(pomodoroTimer);
    isPomodoroRunning = false;
    startButton.disabled = false;
    pauseButton.disabled = true;
  }

  /**
   * 重置番茄钟计时器
   * 暂停计时器，重置剩余时间，更新显示和进度环
   * 暂停并重置闹钟声音
   */
  function resetPomodoroTimer() {
    pausePomodoroTimer();
    remainingPomodoroSeconds = totalPomodoroSeconds;
    updateTimerDisplay();
    updateProgressRing();
    
    // 新增功能：暂停铃声
    if (!alarmSoundElement.paused) {
      alarmSoundElement.pause();
      alarmSoundElement.currentTime = 0;
    }
  }

  /**
   * 更新计时器显示
   * 根据剩余秒数计算分钟和秒数，并更新显示
   */
  function updateTimerDisplay() {
    const minutes = Math.floor(remainingPomodoroSeconds / 60);
    const seconds = remainingPomodoroSeconds % 60;
    
    minutesDisplayElement.textContent = minutes.toString().padStart(2, '0');
    secondsDisplayElement.textContent = seconds.toString().padStart(2, '0');
  }

  /**
   * 更新进度环
   * 根据剩余时间计算进度环的偏移量
   */
  function updateProgressRing() {
    const circumference = 2 * Math.PI * 90;
    const offset = circumference - (remainingPomodoroSeconds / totalPomodoroSeconds) * circumference;
    document.getElementById('progress').style.strokeDashoffset = offset;
  }

  /**
   * 切换番茄钟模式
   * 根据选择的模式更新背景颜色、按钮状态和总时间
   * 重置计时器
   */
  function switchPomodoroMode(mode) {
    // 移除所有模式类
    document.body.classList.remove('work-mode', 'short-break-mode', 'long-break-mode');
    
    // 添加当前模式类
    if (mode === 'work') {
      document.body.classList.add('work-mode');
    } else if (mode === 'short-break') {
      document.body.classList.add('short-break-mode');
    } else if (mode === 'long-break') {
      document.body.classList.add('long-break-mode');
    }

    currentPomodoroMode = mode;
    
    // 更新按钮状态
    modeButtons.forEach(btn => {
      btn.classList.toggle('active', btn.dataset.mode === mode);
    });
    
    // 设置不同模式的时间
    switch (mode) {
      case 'work':
        totalPomodoroSeconds = 25 * 60;
        break;
      case 'short-break':
        totalPomodoroSeconds = 5 * 60;
        break;
      case 'long-break':
        totalPomodoroSeconds = 15 * 60;
        break;
      case 'quick-test':
        totalPomodoroSeconds = 5;
        break;
      case 'custom':
        // 使用上次设置的自定义时间或默认值
        totalPomodoroSeconds = customPomodoroMinutes * 60;
        break;
    }
    
    resetPomodoroTimer();
  }

  /**
   * 添加新任务
   * 获取输入框中的任务文本，创建新任务对象并添加到任务列表中
   * 保存任务到本地存储，更新任务列表和统计信息
   * 清空输入框并聚焦
   */
  function addNewTask() {
    const text = taskInputField.value.trim();
    if (text === '') return;
    
    const newTask = {
      id: Date.now(),
      text,
      completed: false
    };
    
    pomodoroTasks.push(newTask);
    saveTasksToLocalStorage();
    renderTaskList();
    updateTaskStats();
    
    taskInputField.value = '';
    taskInputField.focus();
  }

  /**
   * 切换任务完成状态
   * 根据任务 ID 找到任务对象，切换其完成状态
   * 保存任务到本地存储，更新任务列表和统计信息
   */
  function toggleTaskCompletionStatus(taskId) {
    const task = pomodoroTasks.find(t => t.id === taskId);
    if (task) {
      task.completed = !task.completed;
      saveTasksToLocalStorage();
      renderTaskList();
      updateTaskStats();
    }
  }

  /**
   * 从列表中删除任务
   * 根据任务 ID 过滤任务列表，移除指定任务
   * 保存任务到本地存储，更新任务列表和统计信息
   */
  function deleteTaskFromList(taskId) {
    pomodoroTasks = pomodoroTasks.filter(t => t.id !== taskId);
    saveTasksToLocalStorage();
    renderTaskList();
    updateTaskStats();
  }

  /**
   * 渲染任务列表
   * 清空任务列表，遍历任务数组，创建任务项元素并添加到列表中
   * 为复选框和删除按钮添加事件监听器
   */
  function renderTaskList() {
    taskListElement.innerHTML = '';
    
    pomodoroTasks.forEach(task => {
      const li = document.createElement('li');
      li.className = `task-item ${task.completed ? 'completed' : ''}`;
      li.dataset.id = task.id;
      li.innerHTML = `
        <input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''}>
        <span class="task-text ${task.completed ? 'completed' : ''}">${task.text}</span>
        <button class="delete-task" aria-label="删除任务">×</button>
      `;
      
      li.querySelector('.task-checkbox').addEventListener('change', () => toggleTaskCompletionStatus(task.id));
      li.querySelector('.delete-task').addEventListener('click', () => deleteTaskFromList(task.id));
      
      taskListElement.appendChild(li);
    });
  }

  /**
   * 保存任务到本地存储
   * 将任务数组转换为 JSON 字符串并保存到本地存储
   */
  function saveTasksToLocalStorage() {
    localStorage.setItem('pomodoroTasks', JSON.stringify(pomodoroTasks));
  }

  /**
   * 更新任务统计信息
   * 计算未完成任务数量并更新显示
   * 渲染任务统计图表
   */
  function updateTaskStats() {
    pendingTaskCountElement.textContent = pomodoroTasks.filter(t => !t.completed).length;
    renderTaskStatsChart();
  }

  /**
   * 渲染任务统计图表
   * 使用 ECharts 渲染任务完成情况的饼图
   */
  function renderTaskStatsChart() {
    const chartDom = document.getElementById('stats-chart');
    taskStatsChart = echarts.init(chartDom);

    const completedTasks = pomodoroTasks.filter(t => t.completed).length;
    const pendingTasks = pomodoroTasks.filter(t => !t.completed).length;

    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '任务统计',
          type: 'pie',
          radius: '50%',
          data: [
            { value: completedTasks, name: '已完成' },
            { value: pendingTasks, name: '未完成' }
          ],
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            formatter: '{b}: {d}%'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          color: ['#2ecc71', '#e74c3c']
        }
      ]
    };

    taskStatsChart.setOption(option);
  }

  /**
   * 设置自定义番茄钟时间
   * 获取输入框中的分钟数，限制在 1 - 120 分钟之间
   * 更新总秒数，重置计时器
   * 切换到自定义模式
   */
  function setCustomPomodoroTime() {
    customPomodoroMinutes = parseInt(customMinutesInputField.value) || 25;
    customPomodoroMinutes = Math.max(1, Math.min(120, customPomodoroMinutes)); // 限制在 1 - 120 分钟之间
    customMinutesInputField.value = customPomodoroMinutes;
    
    totalPomodoroSeconds = customPomodoroMinutes * 60;
    resetPomodoroTimer();
    
    // 切换到自定义模式
    document.querySelector('[data-mode="custom"]').click();
  }
});